<template>
	<view class="container">
		<!-- 顶部搜索栏 -->
		<view class="search-box">
			<view class="search-input"><text class="iconfont search-icon">🔎</text>
				<input type="text" v-model="searchKeyword" placeholder="搜索图片" @confirm="searchImages" confirm-type="search" />
			</view>
		</view>
		
		<!-- 图片分类标签 -->
		<view class="category-tabs">
			<view 
				v-for="(item, index) in categories" 
				:key="index"
				:class="['category-item', currentCategory === index ? 'active' : '']"
				@click="switchCategory(index)"
			>
				<text>{{item.name}}</text>
			</view>
		</view>
		
		<!-- 瀑布流图片展示区 -->
		<scroll-view class="waterfall-container" scroll-y @scrolltolower="loadMoreImages">
			<view class="waterfall">
				<view 
					v-for="(item, index) in allImages" 
					:key="index"
					class="image-item"
				>
					<image class="item-image" :src="item.url" mode="widthFix" />
				</view>
			</view>
			
			<!-- 加载更多提示 -->
			<view class="loading-more" v-if="isLoading">
				<text>加载中...</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				currentCategory: 0,
				isLoading: false,
				page: 1,
				categories: [
					{ id: 1, name: '微信头像' },
					{ id: 2, name: '朋友圈文案' },
					{ id: 3, name: '手机壁纸' },
					{ id: 4, name: '热门' }
				],
				allImages: []
			}
		},
		onLoad() {
			// 初始加载图片数据
			this.loadImages();
		},
		methods: {
			// 加载图片数据
			async loadImages() {
				this.isLoading = true;
				try {
					const res = await uniCloud.getTempFileURL({
						fileList: [{
							fileID: 'cloud://cutcut-1g4hy6hs0c2c2c2c.6375-cutcut-1g4hy6hs0c2c2c2c-1304953414/'
						}]
					});

					const { fileList } = await uniCloud.getFileList({
						fileList: [{
							path: 'profile/girl/',
							limit: 10,
							marker: this.page > 1 ? String((this.page - 1) * 10) : ''
						}]
					});

					const newImages = fileList.map((file, index) => ({
						id: file.fileID,
						title: `${this.categories[this.currentCategory].name}${index + 1}`,
						url: file.tempFileURL,
						height: Math.floor(Math.random() * 100) + 150
					}));

					// 将新图片添加到数组中
					this.allImages = this.page === 1 ? newImages : [...this.allImages, ...newImages];

					// 分配图片到左右两列
					this.distributeImages();
				} catch (error) {
					console.error('加载图片失败:', error);
					uni.showToast({
						title: '加载图片失败',
						icon: 'none'
					});
				} finally {
					this.isLoading = false;
				}
			},
			
			// 处理图片数据
			distributeImages() {
				// 在新的布局中，我们直接使用allImages
				// 如果是第一页，清空数组
				if (this.page === 1) {
					this.allImages = [];
				}
				
				// 确保没有重复的图片
				const uniqueImages = [];
				this.allImages.forEach(item => {
					if (!uniqueImages.some(img => img.id === item.id)) {
						uniqueImages.push(item);
					}
				});
				this.allImages = uniqueImages;
			},
			
			// 加载更多图片
			loadMoreImages() {
				if (!this.isLoading) {
					this.page++;
					this.loadImages();
				}
			},
			
			// 切换分类
			switchCategory(index) {
				if (this.currentCategory !== index) {
					this.currentCategory = index;
					this.page = 1;
					this.allImages = [];
					this.loadImages();
				}
			},
			
			
			// 预览图片
			previewImage(item) {
				uni.showToast({
					title: `预览图片: ${item.title}`,
					icon: 'none'
				});
				// 实际应用中这里应该调用uni.previewImage API
			},
			
			// 下载图片
			downloadImage(item) {
				uni.showToast({
					title: `下载图片: ${item.title}`,
					icon: 'none'
				});
				// 实际应用中这里应该调用uni.saveImageToPhotosAlbum API
			}
		}
	}
</script>

<style>
	/* 全局容器样式 */
	.container {
		flex: 1;
		background-color: #f5f5f5;
	}
	
	/* 搜索框样式 */
	.search-box {
		padding: 10px 15px;
		background-color: #ffffff;
	}
	
	.search-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #f0f0f0;
		border-radius: 20px;
		padding: 5px 15px;
	}
	
	.search-icon {
		font-size: 16px;
		color: #999;
		margin-right: 5px;
	}
	
	/* 分类标签样式 */
	.category-tabs {
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}
	
	.category-item {
		flex: 1;
		text-align: center;
		padding: 5px 0;
	}
	
	.category-item text {
		font-size: 14px;
		color: #666;
	}
	
	.category-item.active text {
		color: #007aff;
		font-weight: bold;
	}
	
	/* 瀑布流容器样式 */
	.waterfall-container {
		flex: 1;
		padding: 10px;
	}
	
	.waterfall {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	/* 图片项样式 */
	.image-item {	
		margin-bottom: 15px;
		overflow: hidden;
		padding: 8px;
		width: 48%;
	}
	
	.item-image {
		width: 300rpx;
		height: auto;
		display: block;
		margin: 0 auto;
		border-radius: 12px;
		border-radius: 8px;
		
	}
	
	/* 加载更多样式 */
	.loading-more {
		text-align: center;
		padding: 15px 0;
	}
	
	.loading-more text {
		color: #999;
		font-size: 14px;
	}
</style>
